// 个人详细页面
<template>
  <div>
    <!--<div style="margin-bottom:10px">-->
      <!--<el-tag type="warning">账号:{{username}},等级:{{level}}</el-tag>-->
      <!--<el-tag type="warning">快开:初始{{qk_init_amount}},剩余:{{qk_remaining_amount}}</el-tag>-->
      <!--<el-tag type="warning">香港:初始{{hk_init_amount}},剩余:{{hk_remaining_amount}}</el-tag>-->
    <!--</div>-->

    <el-row class="bread-nav">
      <ul class="bread-nav-title">
        <span>用户资料</span>
      </ul>
    </el-row>

    <div class="content">
    <div>
      <table class="myInfoTable">
        <thead>
          <tr>
            <th colspan="5">
              基本信息
            </th>
          </tr>
        </thead>
        <tbody>
        <tr>
          <td colspan="1" class="myInfoTableLeft">
            账号
          </td>
          <td colspan="4" class="myInfoTableRight">
            {{userInfo.username}}
          </td>
        </tr>
        <tr>
          <td colspan="1" class="myInfoTableLeft">
            快开彩额度
          </td>
          <td colspan="4" class="myInfoTableRight">
            {{userInfo.qk_amount}}
          </td>
        </tr>
        <tr>
          <td colspan="1" class="myInfoTableLeft">
            香港彩额度
          </td>
          <td colspan="4" class="myInfoTableRight">
            {{userInfo.hk_amount}}
          </td>
        </tr>
        </tbody>
      </table>
    </div>

    <div>
      <div>
        <div class="myTable">
          <ul class="myTable-title">
        <span>
          快开彩
        </span>
          </ul>
          <ul class="myTable-content">
            <button v-for="(item,index) in lotteryInfo[0]" @click="changeNowSelectedGame(item.value)" :key="index" :class="{'myTableSelectedBtn':nowSelectedGame === item.value}">
              {{item.label}}
            </button>
          </ul>
        </div>
        <div class="myTable">
          <ul class="myTable-title">
        <span>
          香港彩
        </span>
          </ul>
          <ul class="myTable-content">
            <button v-for="(item,index) in lotteryInfo[1]" @click="changeNowSelectedGame(item.value)" :key="index" :class="{'myTableSelectedBtn':nowSelectedGame === item.value}">
              {{item.label}}
            </button>
          </ul>
        </div>
      </div>
    </div>

    <div>
      <table class="myInfoTable">
        <thead>
          <tr>
            <th>
              玩法
            </th>
            <th>
              A盘退水
            </th>
            <th>
              B盘退水
            </th>
            <th>
              C盘退水
            </th>
            <th>
              D盘退水
            </th>
            <th>
              单注最低
            </th>
            <th>
              单注最高
            </th>
            <th>
              单期限额
            </th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item,index) in commissions" :key="index">
            <td class="tableLeft">{{item.comm_name}}</td>
            <td>{{item.a_commission}}</td>
            <td>{{item.b_commission}}</td>
            <td>{{item.c_commission}}</td>
            <td>{{item.d_commission}}</td>
            <td>{{item.order_min_amount}}</td>
            <td>{{item.order_max_amount}}</td>
            <td>{{item.period_max_amount}}</td>
          </tr>
        </tbody>
      </table>
    </div>

    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { formatFloat } from '@/utils/index'

export default {
  name: 'profileCredit', // 用户信息页
  data() {
    return {
      username: null,
      // level: null, // 用户级别
      // qk_init_amount: null, // 快开初始额度
      // qk_remaining_amount: null, // 快开剩余额度
      // hk_init_amount: null, // 香港
      // hk_remaining_amount: null,
      list: null,
      commissions: null, // table 数据
      commissionsLoading: false,
      loading: false,
      tabName: null, // 默认的tab
      lotteryInfo: [], // 彩种信息
      nowSelectedGame: '', // 当前选择游戏
      userInfo: '', // 用户信息
    }
  },
  filters: {
    formatFloat: formatFloat, // 格式化保留两位小数,
  },
  created() {
    // console.log(formatFloat(2342423, 0));
    // this.fetchCreditInfo()
    this.getLotterys()
  },
  computed: { ...mapGetters(['info', 'games']) },

  methods: {
    changeNowSelectedGame(value) {
      this.nowSelectedGame = value
      this.fetchCreditInfo()
    },
    // 获取彩种信息
    getLotterys() {
      this.lotteryInfo = []
      this.$store.dispatch('GameOptionss')
        .then(response => {
          for (const key in response) {
            if (key !== 'message') {
              const tempNav = []
              for (const index in response[key]) {
                const temp = {
                  label: response[key][index],
                  value: index,
                }
                tempNav.push(temp)
              }
              this.lotteryInfo.push(tempNav)
            }
          }
          this.nowSelectedGame = this.lotteryInfo[0][0].value
          this.fetchCreditInfo()
        })
    },
    // 获取个人信用信息
    fetchCreditInfo() {
      this.loading = true
      console.log(this.nowSelectedGame)
      this.$store.dispatch('GetCreditInfo', { game: this.nowSelectedGame }).then(response => {
        this.loading = false
        if (response && response.amounts) {
          this.userInfo = response.amounts
        }
        if (response && response.commissions) {
          // 庄家没有commission返回
          this.commissions = response.commissions
        }
      })
    },

    // tab change
    handleGameTableClick(tab) {
      // 根据不同的tab获取不同的game detail
      if (this.commissions) {
        this.list = Object.values(this.commissions[tab.name])
      }
    },
  },
}
</script>

<style scoped>
  .bread-nav{
    height:30px;
    font-size: 13px;
    line-height: 30px;
    background: #ECEFF2;
    border-bottom: 1px solid #d0dff2;
    padding: 0 0 0 10px;
    overflow: hidden;
  }
  .bread-nav-title{
    color:#386399;
    font-weight: bold;
    float: left;
    background: url("../../../../static/agent/img/tb.png") no-repeat left center;
    padding-left: 20px;
  }

  .myTable{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: left;
    height:auto;
    border: 1px solid #B9C2CB;
    border-bottom: 0;
  }
  .myTable:last-child{
    border-bottom: 1px solid #B9C2CB !important;
  }
  .myTable ul{
    min-width: 60px;
    text-align: center;
  }
  .myTable-title{
    float:left;
    box-shadow: inset 0px -14px 19px 2px #DAEFEF;
    height:30px;
    font-weight: bold;
    font-size:13px;
    line-height: 30px;
    position: absolute;
    display: block;
  }
  .myTable-content{
    display: flex;
    flex-wrap: wrap;
    justify-content: left;
    border-bottom: 0;
    margin-left: 60px;
  }
  .myTable-content button{
    border:0;
    color:#535353;
    background-color: #DCDCDC;
    height:25px;
    min-width:100px;
    padding: 0 20px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    margin-top: 5px;
    margin-right: 5px;
  }
  .myTable-content button:hover{
    background-color: #386BAD;
    color:#FFF;
  }
  .myTableSelectedBtn{
    background-color: #386BAD !important;
    color:#FFF !important;
  }
  .content{
    padding: 10px;
  }

  .myInfoTable{
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    margin: 2px  0;
  }
  .myInfoTable th{
    background: url(/static/agent/img/table_head.gif) repeat-x;
    height: 25px;
    text-align: center;
    color: #131950;
    font-weight: bold;
    line-height: 25px;
    font-size:14px;
    padding-left: 10px;
    padding-right: 10px;
    border: 1px solid #B9C2CB;
    margin: 0;
  }
  .myInfoTable td{
    text-align: center;
    color: #131950;
    line-height: 25px;
    font-size:14px;
    padding: 5px;
    border: 1px solid #B9C2CB;
    box-sizing: border-box;
  }
  .myInfoTable .myInfoTableLeft{
    text-align: right;
    background-color: #F2F2F2;
  }
  .myInfoTable .myInfoTableRight{
    text-align: left;
  }
  .myInfoTable .tableLeft{
    background-color: #F2F2F2;
  }
</style>
